<!--
  - Copyright (c) 2018-2019.
  -  This file is part of the moonpie production
  -  (c) johnzhang <875010341@qq.com>
  -  This source file is subject to the MIT license that is bundled
  -  with this source code in the file LICENSE.
  -->

<template>
    <div class="widget">
        <div class="am-form-group" v-for="(item,key) in template.data">
            <label class="am-form-label am-u-sm-2 am-u-lg-2">{{item.title}}</label>
            <div class="am-u-sm-10">
                <input type="text" class="input-field-text" v-model="item.value"/>
                <input type="text" class="input-color-picker" v-bind:data-field="key" v-bind:value="item.color"/>
            </div>
        </div>
        <!-- 选择连接方式 -->
        <div class="am-form-group">
            <label class="am-form-label am-u-sm-2 am-u-lg-2">{{linkTypes.label}}</label>
            <div class="am-u-sm-10 am-u-end">
                <label class="am-radio-inline" v-for="linkType in linkTypes.items">
                    <input type="radio" name="link_type" v-model="linkTypes.current" v-bind:value="linkType.id"
                           data-u-check/>{{linkType.title}}
                </label>
            </div>
        </div>
        <div class="am-form-group" v-if="linkMethod.id == 'url'">
            <label class="am-form-label am-u-sm-2 am-u-lg-2">链接</label>
            <div class="am-u-sm-10 am-u-end">
                <input type="text" v-model="template.url" placeholder="请填写需要跳转的链接"/>
            </div>
        </div>
        <template v-else-if="linkMethod.id == 'miniprogram'">
            <div class="am-form-group">
                <label class="am-form-label am-u-sm-2 form-require am-u-lg-2">小程序appid</label>
                <div class="am-u-sm-10 am-u-end">
                    <input type="url" v-model="template.miniprogram.appid" placeholder="请填写需要跳转的小程序appid"/>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-form-label am-u-sm-2 am-u-lg-2 form-require">小程序路径</label>
                <div class="am-u-sm-10 am-u-end">
                    <input type="url" v-model="template.miniprogram.pagepath" placeholder="请填写需要跳转的小程序路径"/>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
  import _ from 'lodash'

  require('spectrum-colorpicker/spectrum')
  require('spectrum-colorpicker/spectrum.css')

  export default {
    name: "TemplateContentConfig",
    props: ['tmplData', 'initConfig'],
    mounted() {
      this.bindColorPicker()
    },
    updated() {
      this.bindColorPicker()
    },
    methods: {
      bindColorPicker() {
        const $color_picker = $(this.$el).find('.input-color-picker')
        let that = this
        $color_picker.spectrum({
          showInput: true,
          chooseText: '选择',
          cancelText: '撤销',
          change: function (color) {
            let field = $(this).data('field')
            console.log('change field is', field)
            that.$set(that.template.data[field], 'color', color.toHexString())
          }
        })
      },
      convertTemplateData() {
        const ret = {}, {content} = this.tmplData
        _.split(content, "\n").forEach(function (item) {
          let line = _.split(item, '：', 2)
          if (line.length > 0) {
            let pattern = /^\{\{(\w+)\.DATA\}\}$/, field
            if (line.length == 2) {
              field = _.replace(line[1], pattern, '$1')
              ret[field] = {color: '#000000', value: '', title: line[0]}
            } else {
              field = _.replace(line[0], pattern, '$1')
              switch (field) {
                case 'first':
                  ret[field] = {color: '#000000', value: '', title: '头部'}
                  break;
                case 'remark':
                  ret[field] = {color: '#000000', value: '', title: '备注'}
                  break;
              }
            }
          }
        })
        return ret
      },
      _rebuildTemplateData() {
        const template = _.extend({
            data: this.convertTemplateData(),
            url: '',
            miniprogram: {
              appid: '',
              pagepath: ''
            }
          }, this.initConfig),
          linkTypes = {
            label: '外部链接',
            current: 'none',
            items: [
              {id: 'none', title: '禁用'},
              {id: 'url', title: '链接'},
              {id: 'miniprogram', title: '小程序'}
            ]
          }
        let appid = _.get(template, 'miniprogram.appid', ''),
          link = _.get(template, 'url', '')
        if (appid.length > 0) {
          linkTypes.current = 'miniprogram'
        } else if (link.length > 0) {
          linkTypes.current = 'url'
        }
        return {
          linkTypes,
          template
        };
      }
    },
    computed: {
      linkMethod() {
        //这里根据当前选择的连接类型，返回数据
        let item = _.find(this.linkTypes.items, {id: this.linkTypes.current})
        if (item) {
          return item
        }
        return {id: 'none', title: '禁用'}
      }
    },
    watch: {
      'tmplData.template_id': function($new, $old)  {
        const {template} = this._rebuildTemplateData()
        this.template = template
      },
      'linkTypes.current': function ($new, $old) {
        switch ($new) {
          case 'none':
            this.$set(this.template, 'url', '')
            this.$set(this.template, 'miniprogram', {appid: '', pagepath: ''})
            break
          case 'url':
            this.$set(this.template, 'miniprogram', {appid: '', pagepath: ''})
            break
          case 'miniprogram':
            this.$set(this.template, 'url', '')
            break
        }
      }
    },
    data() {
      return this._rebuildTemplateData()
    }
  }
</script>

<style>
    input.input-field-text {
        display: initial !important;
        width: 93% !important;
    }
</style>